import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults.mjs"
import { updataUser } from "../api"

const localData = localStorage.getItem('pz_v3pz')

const state = localData ? localData.menu : {
    isCollapse: false,
    selectMenu: [],
    routerList: []
}

const mutations = {
    collapseMenu(state) {
        state.isCollapse = !state.isCollapse
    },
    addMenu(state, payload) {
        //对数据进行去重，过滤重复点击的按钮数据
        if(state.selectMenu.findIndex(item => item.path === payload.path) === -1){
           state.selectMenu.push(payload)
        }
    },
    closeMenu(state, payload) {
        //找到点击数据的索引
        const index = state.selectMenu.findIndex(val => val.name === payload.name)
       //通过索引删除数组指定的元素
       state.selectMenu.splice(index, 1)
    },
    dynamicMenu (state, payload){
    
    //通过glob导入文件
    const modules = import.meta.glob('../views/**/**/*.vue')
    console.log(modules)
    function routerSet(router){
        //判断没有子菜单，拼接路由数据
        router.forEach(route => {
            if(!route.children){
               const url = `../views${route.meta.path}/index.vue`
               //拿到获取的vue组件
               route.component = modules[url]
            }else{
                routerSet(route.children)   // 递归处理子路由（类比：组装多层礼物盒时，
                                       // 必须先装好最内层的小盒子，再依次装入更大的盒子，
                                       // 最后封上最外层包装。）
                                       // 为什么必须从内层开始？
                                       // 1. 依赖关系外层路由的组件通常是布局容器（如包含 <router-view> 的框架），
                                       // 需要子路由的组件已经加载才能正确渲染。例如：
                                       
            
            }
        })
    }
    routerSet(payload)
    //拿到完整路由数据
    state.routerList = payload
    },
    updateMenuActive(state,payload){
        state.menuActive = payload
    }
}

export default {
    state,
    mutations
}